<template>
  <div>
    <h1 class="listTitle">{{listType}}</h1>
    <ul class="articlesList">
      <li v-for="li of articlesList" @click="readArticle(li.id)">
        <!--<div>-->
          <!--<img src="../assets/email.png"/>-->
        <!--</div>-->
        <h2 class="title">{{li.title}}</h2>
        <div><span class="author">{{li.writerId.nickname}}</span>|<span class="time">{{li.time}}</span></div>
      </li>
    </ul>
  </div>
</template>
<script>
let OPINIONS = 1,LOVEROOM = 2,SOFTTIME = 3,HAPPYNOW = 4;
  export default{
    data(){
      return {
        articlesList:[
          {
            "id": 2,
            "writerId": {
              "id": 1,
              "num": "admin1",
              "type": 1,
              "nickname": "Sean",
              "headImgUrl": null,
              "logTime": "2017-08-31 15:02:03"
            },
            "contentUrl": "test4",
            "time": "2017-08-31 10:37:51",
            "title": "test4",
            "type": 1
          },
          {
            "id": 2,
            "writerId": {
              "id": 1,
              "num": "admin1",
              "type": 1,
              "nickname": "Sean",
              "headImgUrl": null,
              "logTime": "2017-08-31 15:02:03"
            },
            "contentUrl": "test4",
            "time": "2017-08-31 10:37:51",
            "title": "test4",
            "type": 1
          },
          {
            "id": 2,
            "writerId": {
              "id": 1,
              "num": "admin1",
              "type": 1,
              "nickname": "Sean",
              "headImgUrl": null,
              "logTime": "2017-08-31 15:02:03"
            },
            "contentUrl": "test4",
            "time": "2017-08-31 10:37:51",
            "title": "test4",
            "type": 1
          },
        ],
        listType:'麻辣观点'
      }
    },
    methods:{
      readArticle(id){
        let type = this.$route.params.type;
        this.$router.push({
          path:`/base/news/${type}/article`,
          query:{id:id}
        });
      },
      initializeList(typeNum){
//        this.$http({
//          method: 'get',
//          url: 'article/list',
//          params: {
//            "page": this.currentPage,
//            "pageSize":this.pageSize,
//            "type":typeNum,
//          }
//        }).then((response)=>{
//          if(response.status === 'SUCCESS'){
//            this.articlesList = response.object.objects;
            let type = '';
            switch (typeNum){
              case OPINIONS:type = '麻辣观点';break;
              case LOVEROOM:type = '情感培训室';break;
              case SOFTTIME:type = '柔软时光';break;
              case HAPPYNOW:type = '幸福就在当下';break;
              default:type = '';break;
            }
            this.listType = type;
//          }else{
//
//          }
//        }).catch((err)=>{
//
//        })
      }
    },
    beforeRouteUpdate (to, from, next) {
      console.log(to.params.type);
      switch (to.params.type)
      {
        case 'opinions': this.initializeList(OPINIONS);next();break;
        case 'loveRoom': this.initializeList(LOVEROOM);next();break;
        case 'softTime': this.initializeList(SOFTTIME);next();break;
        case 'happyNow': this.initializeList(HAPPYNOW);next();break;
        default: this.$router.replace('/news/opinions');break;
      }
    },
    created(){
//      默认初始加载文章列表时，显示麻辣观点
      this.initializeList(OPINIONS);
    }
  }
</script>
<style scoped>
  .listTitle{
    font-size: 1.2em;
    color: #f85377;
  }
  .articlesList{
    list-style: none;
  }
  .articlesList>li{
    padding: 0.8em;
    margin: 1.5em 0em;
    border-bottom: 1px solid gray;
    cursor: pointer;
  }
  .title{
    font-size: 1em;
    color: #ff5579;
  }
  .author,.time{
    font-size: 0.8em;
    margin: 0px 5px;
  }
  .author{
    color: #525252;
  }
  .time{
    color: #9F9F9F;
  }
</style>